<template>
	<view class="">
		<!-- 选择地址 -->
		<!-- :indicator-style="indicatorStyle" -->
		<uni-drawer-bottom class="uni-drawer" ref="drawerBottom"  mode="botton" :mask-click="true" >
			<view style="height: 100%;" @click="close('drawerBottom')">
				<scroll-view scroll-y="true" class="scroll-view-box" @click.stop="stop">
					<view class="prcker-btn">
						<view class="" @click="close">取消</view>
						<view class="" @click="sure">确定</view>
					</view>
					<picker-view  v-if="visible" :indicator-style="indicatorStyle" mask-class="mask"  :value="value" @change="bindChange" @pickend="pickend" class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in city" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="(item,index) in district" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</scroll-view>
			</view>
		</uni-drawer-bottom>
	</view>
</template>

<script>
	
	export default{
		data(){
			return{
				index: 0,
				value:[0,0,0],
				province:[],
				city:[],
				district:[],
				indicatorStyle: `height: 50px;`,
				visible:true,
				arrList: [0,0,0]
				
			}
		},
		mounted() {
			this.clear()
			this.getArea("","")
			this.getAreaCity("1","")
			this.getAreaDistrict("1","2")
		},
		methods:{
			stop(){},
			getArea(provinceId,cityId){
				let params = {
					province:provinceId,
					city:cityId
				}
				this.$api.getArea(params).then(res => {
					const {code,data,msg,time} = res.data
					if(code === 1){
						this.province = []
						data.forEach((el)=>{
							this.province.push(el)
						})
						
					}else{
						this.$toast(msg) 
					}
                }).catch((err) => {
				}).finally((e) => {
				}) 
			},
			getAreaCity(provinceId,cityId){
				let params = {
					province:provinceId,
					city:""
				}
				this.$api.getArea(params).then(res => {
					const {code,data,msg,time} = res.data
					if(code === 1){
						this.city = []
						data.forEach((el)=>{
							this.city.push(el)
						})
						if(!cityId){
							cityId = 0
						}
						this.getAreaDistrict(provinceId,this.city[cityId].value)
					}else{
						this.$toast(msg) 
					}
                }).catch((err) => {
					console.log(err)
				}).finally((e) => {
				}) 
			},
			getAreaDistrict(provinceId,cityId){
				let params = {
					province:provinceId,
					city:cityId
				}
				this.$api.getArea(params).then(res => {
					const {code,data,msg,time} = res.data
					if(code === 1){
						this.district = []
						data.forEach((el)=>{
							this.district.push(el)
						})
						
					}else{
						this.$toast(msg) 
					}
                }).catch((err) => {
				}).finally((e) => {
				}) 
			},
			bindChange(e){
				let arr = e.detail.value
				let provinceId =  this.province[arr[0]].value
				let cityId =  this.city[arr[1]].value
				let districtId =  this.district[arr[2]].value
				this.getArea("","")
				this.getAreaCity(provinceId,arr[1])
				this.arrList = arr
			},
			pickend(e){
				// console.log(e)
			},
			clear(){
				this.province = []
				this.city = []
				this.district = []
			},
			close(){
				this.$refs['drawerBottom'].close()
			},
			open(){
				this.arrList = [0,0,0]
				this.clear()
				this.getArea("","")
				this.getAreaCity("1","")
				this.getAreaDistrict("1","2")
				this.$refs['drawerBottom'].open()
			},
			sure(){
				let arr = this.arrList
				let provinceId =  this.province[arr[0]]
				let cityId =  this.city[arr[1]]
				let districtId =  this.district[arr[2]]
				let params = {
					provinceId:provinceId,
					cityId:cityId,
					districtId:districtId
				}
				this.$emit("onChange",params)
				this.$refs['drawerBottom'].close()
			}
		},
		
	}
</script>

<style scoped>
	.picker-view {
		width: 750rpx;
		height: 360rpx;
		margin-top: 100rpx;
	}
	.item {
		/* height: 50px; */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.prcker-btn{
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		padding: 0 30rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #E5E5E5;
		padding-bottom: 20rpx;
		color: #888;
		
	}
	.prcker-btn view:nth-child(2){
		color: #007aff;
	}
	/* 处理抽屉内容滚动 */
	.scroll-view-box {
		flex: 1;
		position: absolute;
		background-color: #FFFFFF;
		right: 0;
		bottom: 0;
		left: 0;
		height: 600rpx;
		padding-top: 30rpx;
	}
</style>
